用精灵图做一个二哈奔跑的动画。

       将每一帧图片按动画序列顺序放好，然后调出PhotoShop的网格，调好每一帧的位置，同一行每一帧之间的距离等距，上下两行间的距离也调成等距。

       用PhotoShop中的标尺工具测量图片高度，作为css中height的值，如果图片做的比较好可直接用百分比(50%)，width的值为整个图片宽度。

当第一行遍历完后，前往遍历第二行的过程有个回退效果，为了减弱这个效果的显示，在css中设置第一行到第二行的转移时，尽可能地让该过程占用的时间很小。

html部分

css部分

素材： 实现效果：如果网页中闪烁效果太明显，可以将精灵图内容放在同一行上。